import { useState } from 'react';
import { FloatButton, Popover, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import loadable from '@loadable/component';

import useAuthAction from '@/hooks/useAuthAction';
import { WORK_EDIT, ROLE_EDIT, MERCH_EDIT } from '@/config/url';
import styles from './index.module.scss';

const IconFont = loadable(() => import('@/components/IconFont'));

export default function CreateFloatButton() {
    const [open, setOpen] = useState(false);
    const navigate = useNavigate();
    const withAuth = useAuthAction();

    const handleOpen = withAuth(() => {
        setOpen(!open);
    });

    const handleMenuClick = (path) => {
        setOpen(false);
        navigate(path);
    };

    const toMerchEdit = withAuth(() => {
        handleMenuClick(MERCH_EDIT);
    });

    return <div className={styles['container']} onClick={toMerchEdit}><span><IconFont name="icon-up"/></span>&nbsp;晒谷子</div>
    return <Button onClick={toMerchEdit} icon={<UploadOutlined/>} shape="round" type="primary">晒谷子</Button>;
    return (
        <FloatButton
            shape="circle"
            type="primary"
            size="large"
            style={{ insetInlineEnd: 64 }}
            icon={<IconFont name="icon-plus" />}
            onClick={toMerchEdit}
        />
    );
    return (
        <Popover
            content={
                <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                    <Button 
                        type="text" 
                        size="large"
                        onClick={() => handleMenuClick(MERCH_EDIT)}
                        style={{ textAlign: 'left' }}
                        icon={<i style={{color:'var(--main-7)',fontSize:18,lineHeight:18}}><IconFont name="icon-tag" /></i>}
                    >
                        新建谷子
                    </Button>
                    <Button 
                        type="text" 
                        size="large"
                        onClick={() => handleMenuClick(WORK_EDIT)}
                        style={{ textAlign: 'left' }}
                        icon={<i style={{color:'var(--main-7)',fontSize:18,lineHeight:18}}><IconFont name="icon-zuopin" /></i>}
                    >
                        新建作品
                    </Button>
                    <Button 
                        type="text" 
                        size="large"
                        onClick={() => handleMenuClick(ROLE_EDIT)}
                        style={{ textAlign: 'left' }}
                        icon={<i style={{color:'var(--main-7)',fontSize:18,lineHeight:18}}><IconFont name="icon-ic_intern" /></i>}
                    >
                        新建角色
                    </Button>
                </div>
            }
            title={null}
            open={open}
            onOpenChange={setOpen}
            placement="topRight"
        >
            <FloatButton
                shape="circle"
                type="primary"
                size="large"
                style={{ insetInlineEnd: 64 }}
                icon={<IconFont name="icon-plus" />}
                onClick={handleOpen}
            />
        </Popover>
    );
}